<template>
  <NavBar :title="type === 1 ? '通知列表' : '公告列表'"></NavBar>
  <scroll-view scroll-y class="scroll-Y" @scrolltolower="lower" @scroll="scroll">
    <uni-list :border="false">
      <uni-list-item :title="item.noticeTitle" :note="item.noticeContent" :label="item.noticeContent"
        v-for="item in noticeList" :key="item.id" @click="toNoticeDetail(item)" :rightText="item.createTime" clickable
        showArrow></uni-list-item>
    </uni-list>
  </scroll-view>
  <img v-if="!noticeList.length" class="noData" src="@/draw/assets/暂无数据.png" mode="aspectFill" />
</template>
<script setup>
import NavBar from "@/components/NavBar";
import { ref } from "vue";
import { getNoticeList } from "@/api/noticelist";
import { onLoad } from "@dcloudio/uni-app";
const HeightNum = ref(uni.getWindowInfo().screenHeight);
const scroll = (e) => {
};
const isShow = ref(false);
const lower = () => {
  getNoticeListMethods(data.value);
};
const props = defineProps({
  type: {
    type: Number,
    default: 1,
  },
});
const noticeList = ref([]);
const data = ref({
  type: props.type,
  page: 0,
});

const toNoticeDetail = (item) => {
  uni.navigateTo({
    url: "/pages/noticeDetails/index?item=" + JSON.stringify(item),
  });
};

const getNoticeListMethods = async () => {
  if (!isShow.value) {
    const res = await getNoticeList(data.value);
    res.data.forEach((item) => {
      item.noticeContent = getPlainText(item.noticeContent);
    });
    if (res.data.length >= 10) {
      data.value.page++;
    } else {
      isShow.value = true;
    }
    noticeList.value = [...noticeList.value, ...res.data];
  }
};

onLoad(() => {
  getNoticeListMethods();
});
</script>
<script>
// #region 富文本编辑器
// 转意符换成普通字符
function convertIdeogramToNormalCharacter(val) {
  const arrEntities = { lt: "<", gt: ">", nbsp: " ", amp: "&", quot: '"' };
  return val.replace(/&(lt|gt|nbsp|amp|quot);/gi, (all, t) => {
    return arrEntities[t];
  });
}

// 获取富文本的纯文字内容
const getPlainText = (richCont) => {
  const str = richCont;
  let value = richCont;
  if (richCont) {
    // 方法一：
    value = value.replace(/\s*/g, ""); // 去掉空格
    value = value.replace(/<[^>]+>/g, ""); // 去掉所有的html标记
    value = value.replace(/↵/g, ""); // 去掉所有的↵符号
    value = value.replace(/[\r\n]/g, ""); // 去掉回车换行
    value = value.replace(/&nbsp;/g, ""); // 去掉空格
    value = convertIdeogramToNormalCharacter(value);
    return value;

    // 方法二：
    // value = value.replace(/(\n)/g, "");
    // value = value.replace(/(\t)/g, "");
    // value = value.replace(/(\r)/g, "");
    // value = value.replace(/<\/?[^>]*>/g, "");
    // value = value.replace(/\s*/g, "");
    // value = convertIdeogramToNormalCharacter(value);
    // return value;
  } else {
    return null;
  }
};

// #endregion
</script>
<style lang="less" scoped>
::v-deep {
  .uni-list-item {
    background-color: var(--a-main-box-bg-color) !important;
    border-radius: 30rpx;
    margin: 10rpx 0;
  }

  .uni-list--border:after {
    background-color: transparent;
  }

  .uni-list-item__content-title {
    color: var(--a-one-text-color);
  }

  .uni-list {
    background-color: transparent;
    padding: 0 30rpx;
  }

  .uni-list-item__extra-text {
    color: var(--a-two-text-color);
  }

  .uniui-arrowright {
    color: var(--a-two-text-color) !important;
  }

  .uni-list-item__content-note {
    width: 300rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--a-two-text-color);
  }
}

.scroll-Y {
  max-height: 100vh;
}

.noData {
  display: block;
  width: 500rpx;
  height: 500rpx;
  margin: 200rpx auto;
}

.null {
  margin: 0 auto;
  color: var(--a-two-text-color);
  font-size: 24rpx;
}
</style>
